﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMap.aspx.cs" Inherits="ShuiWenJu_GoogleMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>浙江遥测管理系统——地图监视</title>
    <link href="../Css/Swj.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        function urLink(url)
        {
            window.parent.frames["content"].location.href=url;
        }
     
        function video2()
        { 
        document.getElementById("video-3").style.display="none";
        document.getElementById("video-21").style.display="block";
        document.getElementById("video-2").style.display="none";
        }
        function video21()
        { 
        document.getElementById("video-3").style.display="block";
        document.getElementById("video-21").style.display="none";
        document.getElementById("video-2").style.display="block";
        }
        
        
        function smallvideo2()
        { 
        document.getElementById("smallvideo-3").style.display="none";
        document.getElementById("smallvideo-21").style.display="block";
        document.getElementById("smallvideo-2").style.display="none";
        }
        function smallvideo21()
        { 
        document.getElementById("smallvideo-3").style.display="block";
        document.getElementById("smallvideo-21").style.display="none";
        document.getElementById("smallvideo-2").style.display="block";
        }
        
        
        
    </script>
</head>
<body style="width: 100%; height: 100%;">
    <div id="video">
       <div style="float:left;width:20px;" id="video-2" onclick="javascript:video2()"><img src="../img/newbutton3.gif" border=0></div>
       <div style="float:left;width:20px;display:none;" id="video-21" onclick="javascript:video21()"><img src="../img/newbutton3.gif" border=0></div>
       <div style="float:right;" id="video-3">
		       
		       <div class="video-box" id="video-box"><iframe name="jinyu-table" src="../../Base_Data/Base_Data/video.htm" scrolling="no" frameborder="0" width="200" height="188"></iframe></div>
       </div>
    </div>
    
    <div id="smallvideo">       
       <div style="float:left;width:20px;" id="smallvideo-2" onclick="javascript:smallvideo2()"><img src="../img/newbutton4.gif" border=0></div>
       <div style="float:left;width:20px;display:none;" id="smallvideo-21" onclick="javascript:smallvideo21()"><img src="../img/newbutton4.gif" border=0></div>
       <div style="float:right;" id="smallvideo-3">
           <div class="smallvideo-box" id="smallvideo-box"><iframe name="jinyu-table" src="../../ShuiWenJu/RepRealTime/MsLineIframe.aspx" scrolling="no" frameborder="0" width="200" ></iframe></div>
       </div>
    </div>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/ShuiWenJu/RepRealTime/GService.asmx" />
        </Services>
    </asp:ScriptManager>
    <div style="width: 100%; height: 100%; position: absolute;z-index:-1;">
        
        <div class="menu">
           <ul>
              <li class="curr">地 图</li>
              <li onclick="urLink('../../ShuiWenJu/RepRealTime/GeneralRpt.aspx')"  style="cursor:hand;">数 据</li>
           </ul>
        </div>
        <div id="GoogleMap_Div" style="width: 100%; height: 100%; position: absolute;">
        </div>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hidEventName" runat="server" />
            <asp:HiddenField ID="hidEventValue" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>

    <script src="http://maps.google.com/maps?file=api&amp;v=<%=GoogleMapObject.APIVersion %>&amp;key=<%=GoogleMapObject.APIKey %>"
        type="text/javascript"></script>

    <script language="JavaScript">

        //RaiseEvent('MovePushpin','pushpin2');
        function RaiseEvent(pEventName, pEventValue) {
            document.getElementById('<%=hidEventName.ClientID %>').value = pEventName;
            document.getElementById('<%=hidEventValue.ClientID %>').value = pEventValue;
            __doPostBack('UpdatePanel1', '');
        }

        var map;
        var trafficInfo = null;

        //function fListeners()
        //{
        //    this.listeners = new Array();
        //    this.getLength = function() { return this.listeners.length; };
        //    this.pushValue = function(v) { this.listeners.push(v); }
        //    this.getValue = function(i)  { return this.listeners[i]; }
        //}
        function fMarkers() {
            this.markers = new Array();
            this.getLength = function() { return this.markers.length; };
            this.pushValue = function(v) { this.markers.push(v); }
            this.getValue = function(i) { return this.markers[i]; }
            this.getLastValue = function() { return this.markers[this.markers.length - 1]; }
            this.getValueById = function(ID) {
                var i;
                for (i = 0; i < this.markers.length; i++) {
                    if (this.markers[i].value == ID) {
                        // alert('marker found : '+this.markers[i].value);
                        return this.markers[i];
                    }
                }
                return null;
            }
            this.removeValueById = function(ID) {
                var i;
                for (i = 0; i < this.markers.length; i++) {
                    if (this.markers[i].value == ID) {
                        // alert('marker found : '+this.markers[i].value);
                        this.markers.splice(i, 1);
                        //alert('changed marker removed');

                    }
                }
                return null;
            }
        }

        function fPolylines() {
            this.polylines = new Array();
            this.polylinesID = new Array();
            this.getLength = function() { return this.polylines.length; };
            this.pushValue = function(v, ID) { this.polylines.push(v); this.polylinesID.push(ID); }
            this.getValue = function(i) { return this.polylines[i]; }
            this.getLastValue = function() { return this.polylines[this.polylines.length - 1]; }
            this.getValueById = function(ID) {
                var i;
                for (i = 0; i < this.polylinesID.length; i++) {
                    if (this.polylinesID[i] == ID) {
                        // alert('polyline found : '+this.polylines[i].value);
                        return this.polylines[i];
                    }
                }
                return null;
            }
            this.removeValueById = function(ID) {
                var i;
                for (i = 0; i < this.polylinesID.length; i++) {
                    if (this.polylinesID[i] == ID) {
                        this.polylines.splice(i, 1);
                        this.polylinesID.splice(i, 1);
                    }
                }
                return null;
            }
        }

        function fPolygons() {
            this.polygons = new Array();
            this.polygonsID = new Array();
            this.getLength = function() { return this.polygons.length; };
            this.pushValue = function(v, ID) { this.polygons.push(v); this.polygonsID.push(ID); }
            this.getValue = function(i) { return this.polygons[i]; }
            this.getLastValue = function() { return this.polygons[this.polygons.length - 1]; }
            this.getValueById = function(ID) {
                var i;
                for (i = 0; i < this.polygonsID.length; i++) {
                    if (this.polygonsID[i] == ID) {
                        return this.polygons[i];
                    }
                }
                return null;
            }
            this.removeValueById = function(ID) {
                var i;
                for (i = 0; i < this.polygonsID.length; i++) {
                    if (this.polygonsID[i] == ID) {
                        this.polygons.splice(i, 1);
                        this.polygonsID.splice(i, 1);
                    }
                }
                return null;
            }
        }

        if (GBrowserIsCompatible()) {
            //debugger;
            //GoogleMapForASPNet.OnSecondChange("Ghata");
            map = new GMap2(document.getElementById("GoogleMap_Div"));

            var markers = new fMarkers();
            var polylines = new fPolylines();
            var polygons = new fPolygons();
            //var myEventListeners = new fListeners();

            function CreateMarker(point, icon1, InfoHTML, bDraggable, sTitle) {
                var marker;
                //    if(icon!=null)
                //    {
                marker = new GMarker(point, { icon: icon1, draggable: bDraggable, title: sTitle });
                //    }
                //    else
                //    {
                //        marker = new GMarker(point);
                //    }
                if (InfoHTML != '') {
                    // vlisteners.pushValue(GEvent.addListener(marker, "click", function() { map.openInfoWindowHtml(point,InfoHTML); }));
                    GEvent.addListener(marker, "click", function() { map.openInfoWindowHtml(point, InfoHTML); });
                    GEvent.addListener(marker, "dragend", function() { GService.SetLatLon(this.value, this.getLatLng().y, this.getLatLng().x); RaiseEvent('PushpinMoved', this.value); });
                }
                return marker;
            }

            function CreatePolyline(points, color, width, isgeodesic) {
                var polyline;
                if (!isgeodesic) {
                    polyline = new GPolyline(points, color, width);
                }
                else {
                    var polyOptions = { geodesic: true };
                    polyline = new GPolyline(points, color, width, 1, polyOptions);
                }
                return polyline;
            }

            function CreatePolygon(points, strokecolor, strokeweight, strokeopacity, fillcolor, fillopacity) {
                var polygon;

                var polygon = new GPolygon(points, strokecolor, strokeweight, strokeopacity, fillcolor, fillopacity);
                return polygon;
            }

            function fGetGoogleObject(result, userContext) {
                map.setCenter(new GLatLng(result.CenterPoint.Latitude, result.CenterPoint.Longitude), result.ZoomLevel);

                if (result.ShowMapTypesControl) {
                    map.addControl(new GMapTypeControl());
                }

                if (result.ShowZoomControl) {
                    map.addControl(new GLargeMapControl());
                }

                var i;
                if (markers != null) {
                    for (i = 0; i < markers.getLength(); i++) {
                        var cmark = markers.getValue(i);
                        if (cmark != null) {
                            map.removeOverlay(cmark);
                        }
                    }
                }
                //    if(myEventListeners!=null)
                //    {
                //        for(i=0;i<myEventListeners.getLength();i++)
                //        {
                //            var lisnr = myEventListeners.getValue(i);
                //            if(lisnr!=null)
                //            {
                //                GEvent.removeListener(lisnr);
                //            }
                //        }
                //    }  
                markers = new fMarkers();
                //    myEventListeners = new fListeners();

                for (i = 0; i < result.Points.length; i++) {
                    var myIcon_google;

                    var myPoint = new GLatLng(result.Points[i].Latitude, result.Points[i].Longitude);

                    myIcon_google = null;
                    if (result.Points[i].IconImage != '') {
                        myIcon_google = new GIcon(G_DEFAULT_ICON);
                        markerOptions = { icon: myIcon_google };

                        myIcon_google.iconSize = new GSize(result.Points[i].IconImageWidth, result.Points[i].IconImageHeight);
                        myIcon_google.image = result.Points[i].IconImage;
                    }

                    var marker = CreateMarker(myPoint, myIcon_google, result.Points[i].InfoHTML, result.Points[i].Draggable, result.Points[i].ToolTip);
                    marker.value = result.Points[i].ID;
                    markers.pushValue(marker);
                    map.addOverlay(markers.getLastValue());
                }
                //Add polylines
                // alert('adding polyline');

                polylines = new fPolylines();
                for (i = 0; i < result.Polylines.length; i++) {
                    var polypoints = new Array();
                    var j;
                    for (j = 0; j < result.Polylines[i].Points.length; j++) {
                        polypoints.push(new GLatLng(result.Polylines[i].Points[j].Latitude, result.Polylines[i].Points[j].Longitude));
                    }
                    var polyline = CreatePolyline(polypoints, result.Polylines[i].ColorCode, result.Polylines[i].Width, result.Polylines[i].Geodesic);
                    polylines.pushValue(polyline, result.Polylines[i].ID);
                    map.addOverlay(polylines.getLastValue());
                }

                polygons = new fPolygons();
                for (i = 0; i < result.Polygons.length; i++) {
                    var polypoints = new Array();
                    var j;
                    for (j = 0; j < result.Polygons[i].Points.length; j++) {
                        polypoints.push(new GLatLng(result.Polygons[i].Points[j].Latitude, result.Polygons[i].Points[j].Longitude));
                    }
                    var polygon = CreatePolygon(polypoints, result.Polygons[i].StrokeColor, result.Polygons[i].StrokeWeight, result.Polygons[i].StrokeOpacity, result.Polygons[i].FillColor, result.Polygons[i].FillOpacity);
                    polygons.pushValue(polygon, result.Polygons[i].ID);
                    map.addOverlay(polygons.getLastValue());
                }


                if (result.ShowTraffic) {
                    trafficInfo = new GTrafficOverlay();
                    map.addOverlay(trafficInfo);
                }
            }
            GService.GetGoogleObject(fGetGoogleObject);

            function fGetGoogleObjectOptimized(result, userContext) {
                if (result.RecenterMap) {
                    map.setCenter(new GLatLng(result.CenterPoint.Latitude, result.CenterPoint.Longitude), result.ZoomLevel);
                    GService.RecenterMapComplete();
                }

                if (result.ShowTraffic) {
                    trafficInfo = new GTrafficOverlay();
                    map.addOverlay(trafficInfo);
                }
                else {
                    if (trafficInfo != null) {
                        map.removeOverlay(trafficInfo);
                        trafficInfo = null;
                    }
                }

                var i;
                for (i = 0; i < result.Points.length; i++) {
                    //Create icon
                    var myIcon_google;

                    var myPoint = new GLatLng(result.Points[i].Latitude, result.Points[i].Longitude);

                    myIcon_google = null;
                    if (result.Points[i].IconImage != '') {
                        myIcon_google = new GIcon(G_DEFAULT_ICON);
                        markerOptions = { icon: myIcon_google };

                        myIcon_google.iconSize = new GSize(result.Points[i].IconImageWidth, result.Points[i].IconImageHeight);
                        myIcon_google.image = result.Points[i].IconImage;
                    }
                    //Existing marker, but changed.
                    if (result.Points[i].PointStatus == 'C') {
                        var marker = markers.getValueById(result.Points[i].ID);
                        if (marker != null) {
                            markers.removeValueById(result.Points[i].ID);
                            map.removeOverlay(marker);
                        }
                        var marker = CreateMarker(myPoint, myIcon_google, result.Points[i].InfoHTML, result.Points[i].Draggable, result.Points[i].ToolTip);
                        marker.value = result.Points[i].ID;
                        markers.pushValue(marker);
                        map.addOverlay(markers.getLastValue());
                    }
                    //New Marker
                    if (result.Points[i].PointStatus == 'N') {
                        var marker = CreateMarker(myPoint, myIcon_google, result.Points[i].InfoHTML, result.Points[i].Draggable, result.Points[i].ToolTip);
                        marker.value = result.Points[i].ID;
                        markers.pushValue(marker);
                        map.addOverlay(markers.getLastValue());
                    }
                    //Existing marker, but deleted.
                    if (result.Points[i].PointStatus == 'D') {
                        var marker = markers.getValueById(result.Points[i].ID);
                        if (marker != null) {
                            markers.removeValueById(result.Points[i].ID);
                            map.removeOverlay(marker);
                        }
                    }
                }

                //Get Polylines
                for (i = 0; i < result.Polylines.length; i++) {
                    //Existing marker, but changed.

                    if (result.Polylines[i].LineStatus == 'C') {

                        var polyline = polylines.getValueById(result.Polylines[i].ID);
                        if (polyline != null) {
                            polylines.removeValueById(result.Polylines[i].ID);
                            map.removeOverlay(polyline);
                        }
                        var polypoints = new Array();
                        var j;
                        for (j = 0; j < result.Polylines[i].Points.length; j++) {
                            polypoints.push(new GLatLng(result.Polylines[i].Points[j].Latitude, result.Polylines[i].Points[j].Longitude));
                        }
                        var polyline = CreatePolyline(polypoints, result.Polylines[i].ColorCode, result.Polylines[i].Width, result.Polylines[i].Geodesic);
                        polylines.pushValue(polyline, result.Polylines[i].ID);
                        map.addOverlay(polylines.getLastValue());
                    }
                    //New Marker

                    if (result.Polylines[i].LineStatus == 'N') {
                        var polypoints = new Array();
                        var j;
                        for (j = 0; j < result.Polylines[i].Points.length; j++) {
                            polypoints.push(new GLatLng(result.Polylines[i].Points[j].Latitude, result.Polylines[i].Points[j].Longitude));
                        }
                        var polyline = CreatePolyline(polypoints, result.Polylines[i].ColorCode, result.Polylines[i].Width, result.Polylines[i].Geodesic);
                        polylines.pushValue(polyline, result.Polylines[i].ID);
                        map.addOverlay(polylines.getLastValue());
                    }
                    //Existing marker, but deleted.
                    if (result.Polylines[i].LineStatus == 'D') {
                        var polyline = polylines.getValueById(result.Polylines[i].ID);
                        if (polyline != null) {
                            polylines.removeValueById(result.Polylines[i].ID);
                            map.removeOverlay(polyline);
                        }
                    }
                }

                //Get Polygons
                for (i = 0; i < result.Polygons.length; i++) {
                    //Existing marker, but changed.

                    if (result.Polygons[i].Status == 'C') {

                        var polygon = polygons.getValueById(result.Polygons[i].ID);
                        if (polygon != null) {
                            polygons.removeValueById(result.Polygons[i].ID);
                            map.removeOverlay(polygon);
                        }
                        var polypoints = new Array();
                        var j;
                        for (j = 0; j < result.Polygons[i].Points.length; j++) {
                            polypoints.push(new GLatLng(result.Polygons[i].Points[j].Latitude, result.Polygons[i].Points[j].Longitude));
                        }
                        var polygon = CreatePolygon(polypoints, result.Polygons[i].StrokeColor, result.Polygons[i].StrokeWeight, result.Polygons[i].StrokeOpacity, result.Polygons[i].FillColor, result.Polygons[i].FillOpacity);
                        polygons.pushValue(polygon, result.Polygons[i].ID);
                        map.addOverlay(polygons.getLastValue());
                    }
                    //New Marker

                    if (result.Polygons[i].Status == 'N') {
                        var polypoints = new Array();
                        var j;
                        for (j = 0; j < result.Polygons[i].Points.length; j++) {
                            polypoints.push(new GLatLng(result.Polygons[i].Points[j].Latitude, result.Polygons[i].Points[j].Longitude));
                        }
                        var polygon = CreatePolygon(polypoints, result.Polygons[i].StrokeColor, result.Polygons[i].StrokeWeight, result.Polygons[i].StrokeOpacity, result.Polygons[i].FillColor, result.Polygons[i].FillOpacity);
                        polygons.pushValue(polygon, result.Polygons[i].ID);
                        map.addOverlay(polygons.getLastValue());
                    }
                    //Existing marker, but deleted.
                    if (result.Polygons[i].Status == 'D') {
                        var polygon = polygons.getValueById(result.Polygons[i].ID);
                        if (polygon != null) {
                            polygons.removeValueById(result.Polygons[i].ID);
                            map.removeOverlay(polygon);
                        }
                    }
                }
            }

        }
        function endRequestHandler(sender, args) {
            //alert('hi');
            GService.GetOptimizedGoogleObject(fGetGoogleObjectOptimized);
        }
        function pageLoad() {
            if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }    
    </script>

</body>

<script language="javascript" type="text/javascript">
 /*var t=""
 function refrash()
 {
    try{window.parent.parent.parent.frames["righttu"].frames["jinyu-table"].location.href="MsLineIframe.aspx";}
    catch(e){
        if(t=="")
            t=setTimeout(refrash,5000);
    }
 }
refrash();*/
</script>

</html>
